<template>
	<view>
		<block>
			<view class="container nodiydata">
				<swiper class="swiper" :indicator-dots="pics[1]?true:false" :autoplay="true" :interval="5000"
					indicator-color="#dcdcdc" indicator-active-color="#fff">
					<block v-for="(item, index) in pics" :key="index">
						<swiper-item class="swiper-item">
							<image :src="item" mode="widthFix" class="image" />
						</swiper-item>
					</block>
				</swiper>
				<view class="topcontent">
					<view class="logo">
						<image class="img" v-if="business.pic" :src="imgurl+business.pic" />
					</view>
					<uni-fav style="position: absolute;right: 0;top: 0;" :checked="business.gzstatus"
						:content-text="contentText" @tap.stop="favClick(business.id)" />
					<view class="title">{{business.name}}</view>
					<view class="desc">
						<view class="f1">
							<image class="img" v-for="(item2,index2) in [0,1,2,3,4]" :key="index2"
								src="/static/images/star2.png" />
							<text class="txt">5.0</text>
						</view>
						<view class="f2">销量 5</view>
					</view>
					<!-- 	<view class="tel" style="background: linear-gradient(90deg,#3388ff 0%, rgba(51,136,255,0.8) 100%);">
						<view @tap="phone" :data-phone="business.tel" class="tel_online">
							<image class="img" src="/static/images/b_tel.png" />
							联系租赁方
						</view>
					</view> -->
					<view v-if="business.address" class="address" @tap="openLocation(business)"
						:data-longitude="business.longitude" :data-company="business.name"
						:data-address="business.address">
						<image class="f1" src="/static/images/shop_addr.png" />
						<view class="f2">{{business.address}}</view>
						<image class="f3" src="/static/images/arrowright.png" />
					</view>

				</view>
				<!-- #ifndef MP-WEIXIN  -->
				<!-- 门店S -->
				<!-- 		<view  class="mendian-box" @tap="showMendianModal">
					<view class="flex-y-center f1">
						<image class="icon" :src="pre_url+'/static/images/location/mendian.png'">
							<view class="name">
								<view v-if="mendian.id" class="flex-bt">
									<view>{{mendian.name}}</view>
									<view v-if="mendian.distance">距离您{{mendian.distance}}km</view>
								</view>
								<view v-else>
									共<text class="num">{{mendianlist.length}}</text>家门店
								</view>
							</view>
					</view>
					<view class="f2">
						<image class="exchange" v-if="mendian.id" :src="pre_url+'/static/images/location/change.png'">
						</image>
						<image class="more" v-else src="../../static/images/arrowright.png"></image>
					</view>
				</view> -->
				<!-- 门店E -->
				<!-- #endif -->
				<view class="contentbox">
					<view class="shop_tab">
						<!-- <view :class="'cptab_text ' + (st==-1?'cptab_current':'')" @tap="changetab"
							data-st="-1">本店服务<view class="after" style="background: #3388ff;"></view>
						</view> -->
						<view :class="'cptab_text ' + (st==0?'cptab_current':'')" @tap="changetab" data-st="0">本店车辆
							<view class="after" style="background: #3388ff;"></view>
						</view>
						<view :class="'cptab_text ' + (st==1?'cptab_current':'')" @tap="changetab" data-st="1">
							店铺评价<view class="after" style="background: #3388ff;"></view>
						</view>
						<view :class="'cptab_text ' + (st==2?'cptab_current':'')" @tap="changetab" data-st="2">租赁方详情
							<view class="after" style="background: #3388ff;"></view>
						</view>
					</view>

					<!-- 	<view class="cp_detail" v-if="st==-1" style="padding-top:20rpx">
						<view class="classify-ul" v-if="yuyue_clist.length>0">
							<view class="flex" style="width:100%;overflow-y:hidden;overflow-x:scroll;">
								<view class="classify-li"
									:style="yuyue_cid==0?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.2)':''"
									@tap="changeyuyueCTab" :data-id="0">全部</view>
								<block v-for="(item, idx2) in yuyue_clist" :key="idx2">
									<view class="classify-li"
										:style="yuyue_cid==item.id?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.2)':''"
										@tap="changeyuyueCTab" :data-id="item.id">{{item.name}}</view>
								</block>
							</view>
						</view>

						<dp-yuyue-itemlist :data="datalist" :menuindex="menuindex"></dp-yuyue-itemlist>

						<nomore v-if="nomore"></nomore>
						<nodata v-if="nodata"></nodata>
					</view> -->

					<view class="cp_detail" v-if="st==0" style="padding-top:20rpx">
						<dp-product-itemlist :data="datalist" :menuindex="menuindex"></dp-product-itemlist>

						<nomore v-if="nomore"></nomore>
						<nodata v-if="nodata"></nodata>
					</view>

					<view class="cp_detail" v-if="st==1">
						<view class="comment">
							<block v-if="datalist.length>0">
								<view v-for="(item, index) in datalist" :key="index" class="item">
									<view class="f1">
										<image class="t1" :src="item.headimg" />
										<view class="t2">{{item.nickname}}</view>
										<view class="flex1"></view>
										<view class="t3">
											<image class="img" v-for="(item2,index2) in [0,1,2,3,4]" :key="index2"
												:src="'/static/img/star' + (item.score>item2?'2':'') + '.png'" />
										</view>
									</view>
									<view style="color:#777;font-size:22rpx;">{{item.createtime}}</view>
									<view class="f2">
										<text class="t1">{{item.content}}</text>
										<view class="t2">
											<block v-if="item.content_pic!=''">
												<block v-for="(itemp, index) in item.content_pic" :key="index">
													<view @tap="previewImage" :data-url="itemp"
														:data-urls="item.content_pic">
														<image :src="itemp" mode="widthFix" />
													</view>
												</block>
											</block>
										</view>
									</view>
									<view class="f3" v-if="item.reply_content">
										<view class="arrow"></view>
										<view class="t1">租赁方回复：{{item.reply_content}}</view>
									</view>
								</view>
							</block>
							<block v-else>
								<nodata v-show="nodata"></nodata>
							</block>
						</view>
					</view>
					<view class="cp_detail" v-if="st==2" style="padding:20rpx">
						<parse :content="business.content"></parse>
					</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	import {
		getshopbranch,
		postshopfollow,
		getshopfollowlist
	} from '../../utils/new_file.js'
	var util = require('@/components/WSCoordinate.js')
	var app = getApp()
	export default {
		data() {
			return {
				business: [],
				imgurl: '',
				st: 0,
				contentText: {
					contentDefault: '关注',
					contentFav: '已关注'
				},
				checkList1: false,
			};
		},
		onShow: function(e) {
			// if (this.product.product_type == 1) {
			// 	uni.$emit('getglassrecord');
			// }
			this.imgurl = app.globalData.imgUrl
		},
		onLoad(opt) {
			// console.log(opt);
			this.shopbranchfun(opt.id)
		},
		methods: {
			shopbranchfun(id) {
				// console.log(id);
				let what = this
				getshopbranch(id).then(data => {
					this.business = data.data.data
					getshopfollowlist(uni.getStorageSync('useinfo').id).then(data2 => {
						// 使用Array.prototype.find()方法查找具有相同ID的对象，并获取其中一个属性
						var foundObject = data2.data.rows.find(function(obj) {
							return obj.branchId === what.business.id;
						});

						// 如果找到了具有相同ID的对象，则合并其中一个属性到目标对象中
						if (foundObject) {
							this.$set(this.business, 'gzstatus', foundObject.status)
							// 这里假设要合并的属性为'value'，您可以根据实际情况修改
						}
						console.log(this.business);

						uni.setNavigationBarTitle({
							title: this.business.name
						});
					})



				})

			},
			openLocation: function(item) {
				console.log(item)

				var result3 = util.transformFromBaiduToGCJ(item.lat, item.lng);
				console.log(result3);
				var latitude = parseFloat(result3.latitude)
				var longitude = parseFloat(result3.longitude)
				var address = item.address
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: address,
					scale: 13
				})
			},
			changetab: function(e) {
				var st = e.currentTarget.dataset.st;
				// this.pagenum = 1;
				this.st = st;
				// this.datalist = [];
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				// this.getDataList();
			},
			// 关注
			async favClick(id) {
				// console.log();
				let what = this
				if (what.business.gzstatus) {
					uni.showModal({
						title: '提示',
						content: '是否取消关注',
						cancelText: '再想想',
						success: async function(res) {
							if (res.confirm) {
								// what.checkList1 = !what.checkList1
								let obj = {
									userId: uni.getStorageSync('useinfo').id,
									branchId: id,
									status: 0
								}
								let data = await postshopfollow(obj)
								what.$set(what.business, 'gzstatus', 0)
								app.toastnone('取消关注成功')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					// what.checkList1 = !what.checkList1
					let obj = {
						userId: uni.getStorageSync('useinfo').id,
						branchId: id,
						status: 1
					}
					let data = await postshopfollow(obj)
					this.$set(what.business, 'gzstatus', 1)
					app.toastnone('关注成功')
				}

				// this.checkList1 = !this.checkList1

				// console.log(this.checkList[index]);
				// this.$forceUpdate()
			},
		}
	}
</script>

<style lang="less">
	.container {
		position: relative
	}

	.nodiydata {
		display: flex;
		flex-direction: column
	}

	.nodiydata .swiper {
		width: 100%;
		height: 400rpx;
		position: relative;
		z-index: 1
	}

	.nodiydata .swiper .image {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.nodiydata .topcontent {
		width: 94%;
		margin-left: 3%;
		padding: 24rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
		background: #fff;
		margin-top: -120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 16rpx;
		position: relative;
		z-index: 2;
	}

	.nodiydata .topcontent .logo {
		width: 160rpx;
		height: 160rpx;
		margin-top: -104rpx;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 50%;
	}

	.nodiydata .topcontent .logo .img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.nodiydata .topcontent .title {
		color: #222222;
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 12rpx
	}

	.nodiydata .topcontent .desc {
		display: flex;
		align-items: center
	}

	.nodiydata .topcontent .desc .f1 {
		margin: 20rpx 0;
		font-size: 24rpx;
		color: #FC5648;
		display: flex;
		align-items: center
	}

	.nodiydata .topcontent .desc .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.nodiydata .topcontent .desc .f2 {
		margin: 10rpx 0;
		padding-left: 60rpx;
		font-size: 24rpx;
		color: #999;
	}

	.nodiydata .topcontent .tel {
		font-size: 28rpx;
		color: #fff;
		padding: 16rpx 40rpx;
		border-radius: 60rpx;
		font-weight: normal
	}

	.nodiydata .topcontent .tel .img {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
		margin-right: 10rpx
	}

	.nodiydata .topcontent .address {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 20rpx
	}

	.nodiydata .topcontent .address .f1 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx
	}

	.nodiydata .topcontent .address .f2 {
		flex: 1;
		color: #999999;
		font-size: 26rpx
	}

	.nodiydata .topcontent .address .f3 {
		display: inline-block;
		width: 26rpx;
		height: 26rpx
	}

	.nodiydata .contentbox {
		width: 94%;
		margin-left: 3%;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		overflow: hidden
	}

	.nodiydata .shop_tab {
		display: flex;
		width: 100%;
		height: 90rpx;
		border-bottom: 1px solid #eee;
	}

	.nodiydata .shop_tab .cptab_text {
		flex: 1;
		text-align: center;
		color: #646566;
		height: 90rpx;
		line-height: 90rpx;
		position: relative
	}

	.nodiydata .shop_tab .cptab_current {
		color: #323233;
	}

	.nodiydata .shop_tab .after {
		display: none;
		position: absolute;
		left: 50%;
		margin-left: -16rpx;
		bottom: 10rpx;
		height: 3px;
		border-radius: 1.5px;
		width: 32rpx
	}

	.nodiydata .shop_tab .cptab_current .after {
		display: block;
	}


	.nodiydata .cp_detail {
		min-height: 500rpx
	}

	.nodiydata .comment .item {
		background-color: #fff;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.nodiydata .comment .item .f1 {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 10rpx 0;
	}

	.nodiydata .comment .item .f1 .t1 {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nodiydata .comment .item .f1 .t2 {
		padding-left: 10rpx;
		color: #333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.nodiydata .comment .item .f1 .t3 {
		text-align: right;
	}

	.nodiydata .comment .item .f1 .t3 .img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx
	}

	.nodiydata .comment .item .score {
		font-size: 24rpx;
		color: #f99716;
	}

	.nodiydata .comment .item .score image {
		width: 140rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-bottom: 6rpx;
		margin-right: 6rpx;
	}

	.nodiydata .comment .item .f2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10rpx 0;
	}

	.nodiydata .comment .item .f2 .t1 {
		color: #333;
		font-size: 28rpx;
	}

	.nodiydata .comment .item .f2 .t2 {
		display: flex;
		width: 100%
	}

	.nodiydata .comment .item .f2 .t2 image {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx;
	}

	.nodiydata .comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.nodiydata .comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.nodiydata .comment .item .f3 {
		width: 100%;
		padding: 10rpx 0;
		position: relative
	}

	.nodiydata .comment .item .f3 .arrow {
		width: 16rpx;
		height: 16rpx;
		background: #eee;
		transform: rotate(45deg);
		position: absolute;
		top: 0rpx;
		left: 36rpx
	}

	.nodiydata .comment .item .f3 .t1 {
		width: 100%;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 22rpx;
		color: #888;
		background: #eee
	}

	.nodiydata .nomore-footer-tips {
		background: #fff !important
	}

	.nodiydata .covermy {
		position: fixed;
		z-index: 99999;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		z-index: 9999;
		top: 81vh;
		left: 82vw;
		color: #fff;
		background-color: rgba(92, 107, 129, 0.6);
		width: 110rpx;
		height: 110rpx;
		font-size: 26rpx;
		border-radius: 50%;
	}
</style>